<template>
  <div class="upload-container">
    <el-button :style="{background:color,borderColor:color}" icon="el-icon-upload" size="mini" type="primary" @click=" dialogVisible=true">上传图片
    </el-button>
    <el-dialog :visible.sync="dialogVisible">
      <el-upload
        :multiple="true"
        :file-list="fileList"
        :show-file-list="true"
        :on-remove="handleRemove"
        :on-success="handleSuccess"
        :before-upload="handlerBeforeUpload"
        :action="uploadImgUrl"
        :limit="3"
        class="editor-slide-upload"
        list-type="picture-card">
        <el-button size="small" type="primary">点击上传</el-button>
      </el-upload>
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="handleSubmit">确 定</el-button>
    </el-dialog>
  </div>
</template>

<script>
// import { getToken } from 'api/qiniu'
import Vue from 'vue'

export default {
  name: 'EditorSlideUpload',
  props: {
    color: {
      type: String,
      default: '#1890ff'
    }
  },
  data() {
    return {
      dialogVisible: false,
      fileList: [],
      // uploadImgUrl: process.env.BASE_API + '/upload/uploadInforImg'
      uploadImgUrl: this.$http.adornUrl('/sys/oss/uploads?token=') + Vue.cookie.get('admintoken')
    }
  },
  methods: {
    handleSubmit() {
      const arr = Object.keys(this.fileList).map(v => this.fileList[v])
      // if (!this.checkAllSuccess()) {
      //   this.$message('请等待所有图片上传成功 或 出现了网络问题，请刷新页面重新上传！')
      //   return
      // }
      this.$emit('successCBK', arr)
      this.fileList = []
      this.dialogVisible = false
    },
    handleSuccess(response, file, fileList) {
      console.log(response)
      this.fileList = fileList
      // console.log(fileList)
      // if (response.status === 200) {
      //   const objKeyArr = Object.keys(this.listObj)
      //   for (let i = 0; i < objKeyArr.length; i++) {
      //     this.listObj[objKeyArr[i]].url = process.env.BASE_API + response.data
      //     this.listObj[objKeyArr[i]].hasSuccess = true
      //   }
      // }
    },
    handleRemove(file, fileList) {
      this.fileList = fileList
      // const uid = file.uid
      // const objKeyArr = Object.keys(this.listObj)
      // for (let i = 0, len = objKeyArr.length; i < len; i++) {
      //   if (this.listObj[objKeyArr[i]].uid === uid) {
      //     delete this.listObj[objKeyArr[i]]
      //     return
      //   }
      // }
    },
    handlerBeforeUpload(file) {
      let fileName = file.name;
      if (!this.checkFileType(fileName)) {
        this.$message.error('图片类型为jpg或png格式');
        return false;
      }
      const isLt1M = file.size / 1024 / 1024 < 1;

      if (!isLt1M) {
        this.$message.error('图片大小不能超过 1MB!');
      }
      return isLt1M;
    },
    // 判断文件类型
    checkFileType(fileName) {
      let allowFiles = [
        '.jpg', '.jpeg', '.png'
      ]
      let index1 = fileName.lastIndexOf(".");
      let index2 = fileName.length;;
      let postf = fileName.substring(index1,index2);//后缀名
      for (let i = 0; i < allowFiles.length; i++) {
        if (postf === allowFiles[i]) {
          return true
        }
      }
      return false
    },
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.editor-slide-upload {
  margin-bottom: 20px;
  /deep/ .el-upload--picture-card {
    width: 100%;
  }
}
</style>
